<template>
  <div class="mng-template" v-loading="list.loading">
    <div class="flex-row-wrap">
      <el-button type="primary" :icon="Plus" @click="toCU('create')">新增</el-button>
      <div class="condition-item mlauto">
        <el-input v-model="list.condition.name"  placeholder="姓名筛选 " clearable @clear="isFilter" @keydown.enter="isFilter">
          <template #append>
            <el-button :icon="Search" @click="isFilter" />
          </template>
        </el-input>
      </div>
    </div>
    <div class="list mt20">
      <el-table :data="list.data" border>
        <el-table-column label="编号" width="60">
          <template #default="{ $index }">{{ $index + 1 +(list.page.current -1) * list.page.size }}</template>
        </el-table-column>
        <el-table-column label="姓名" prop="name" min-width="150"></el-table-column>
        <el-table-column label="手机号" prop="phone" min-width="150"></el-table-column>
        <el-table-column label="备注" prop="note" min-width="150"></el-table-column>
        <el-table-column label="操作" width="135">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="toCU('update', row)">修改</el-button>
            <el-popconfirm title="确定删除？" @confirm="toDelete(row)">
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page flex-row-end mt20">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="list.page.current"
        :page-size="list.page.size"
        :total="list.page.total"
        @current-change="currentPage"
      />
    </div>
    <CU ref="cuRef" @success="getListData" />
  </div>
</template>

<script setup lang="ts">
import { Plus, Search } from "@element-plus/icons-vue";
import { vLoading, ElMessage } from 'element-plus'
import CU from "./components/CU.vue";
import { deleteRowApi, getListDataApi } from "@/global/api/test";

// 列表数据
const list = reactive({
  data: [],
  page: { current: 1, size: 10, total: 10 },
  condition: { name: '', roleId: undefined },
  loading: false
})
/**
 * 拼接请求参数
 */
const getSendData = () => {
  let sendData = {
    page: { ...list.page },
    condition: {}
  }
  for (let i in list.condition) {
    if (list.condition[i] || list.condition[i] === 0) {
      sendData.condition[i] = list.condition[i]
    }
  }
  return sendData
}
/**
 * 获取列表数据
 */
const getListData = () => {
  list.loading = true
  getListDataApi(getSendData()).then((res: KeyValue) => {
    list.data = res.data.records
    list.page.total = res.data.page.total
  }).finally(() => {
    list.loading = false
  })
}
getListData()
/**
 * 分页
 */
const currentPage = (e: number) => {
  list.page.current = e
  getListData()
}
/**
 * 筛选
 */
const isFilter = () => {
  list.page.current = 1
  getListData()
}

/** 功能 */
/**
 * 去新增修改
 */
const cuRef = ref<InstanceType<typeof CU>>()
const toCU = (type: 'create' | 'update', row?: KeyValue) => {
  cuRef.value?.open(type, row)
}
/**
 * 去删除
 */
const toDelete = (row: KeyValue) => {
  list.loading = true
  deleteRowApi({ id: row.id }).then(() => {
    ElMessage.success({ message: '删除成功！' })
    // 判断总数及分页是否合法 再去重新请求列表数据
    if (list.page.current !== 1 && (list.page.current - 1) * list.page.size >= (list.page.total - 1)) {
      list.page.current--
    }
    getListData()
  }).finally(() => {
    list.loading = false
  })
}
</script>
<style lang="scss" scoped>
</style>
